<template>
  <div class="homes">
    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <div class="content-box">
      <div class="area">
        <div class="change" @click="toArea">
          <div class="change-title">{{ region.regionName }}</div>
          <van-icon size="14" name="exchange" color="gray"/>
        </div>
      </div>
      <div class="tab-box">
        <div class="tab-back">
          <van-tabs class="tabs" :active="active" animated @click-tab="clickActiv">
            <van-tab v-for="(item, index) in tabs" :title="item" :key="index"></van-tab>
          </van-tabs>
          <van-icon class="arrow-down" name="arrow-down" size="12" @click="downClick($event)"/>
        </div>
        <div class="contents">
          <div class="date" @click="dateClick">
            <div class="date-title">统计日期</div>
            <div class="date-date">{{ date.showDate }}
              <van-icon class="arrow-down" name="arrow-down" color="#4a87ed" size="12"/>
            </div>
          </div>

          <div class="list">
            <div class="list-item" v-for="(item, index) in dataList" :key="index" @click="toDown(item)">
              <div class="value-area">{{item.regionName}}</div>
              <div class="value-title">当期值:
                <div class="value">{{item.targetValue}}</div>
              </div>
              <van-icon class="next" name="arrow" size="14"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model:show="showPicker" position="bottom">
      <van-datetime-picker v-model="date.currentDate" type="year-month" @cancel="cancel" @confirm="confirm"/>
    </van-popup>

    <van-overlay class-name="overlay" :show="showTabList" @click="showTabList = false">
      <div class="tablist" :style="'margin-top:'+pageY + 'px; height:calc(100% -'+ pageY + ')px'">
        <div class="tabs-item" v-for="(item, index) in tabs" :key="index" @click="tabItemClick(item,index)">
          {{ item }}
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import "@/api/index"
import {ref, reactive, toRefs, onMounted} from "vue"
import {useRouter} from "vue-router"
import moment from "moment"
import GetNetUtil from "../../../utils/GetNetUtil";

export default {
  setup() {
    const active = ref(0)
    let state = reactive({
      dataList: [],
      showPicker: false,
      date: {
        currentDate: new Date(moment().format('YYYY/MM/DD')),
        minDate: new Date(1990, 0, 1),
        maxDate: new Date(moment().format('YYYY/MM/DD')),
        showDate: moment().format('YYYY-MM')
      },
      active: active,
      showTabList: false,
      pageX: 0,
      pageY: 0,
      tabs: [''],
      selects:[],
      title: '',
      region:{regionName:'',regionId:''},
      targetId:1,
      id:0,
      titleList:[['家宽互联网电视满意度','家宽上网满意度','宽带资费满意度','手机通话满意度','手机上网满意度','手机资费满意度'],['营业厅满意度']]
    })


    const router = useRouter()
    //获取主页面传值
    function getParams() {
      state.title = sessionStorage.getItem("title");
      state.date.showDate = sessionStorage.getItem("showDate");
      state.tabs = [];
      state.tabs= state.titleList[sessionStorage.getItem("id") - 1];
      state.id = sessionStorage.getItem("id");
      state.region.regionName = sessionStorage.getItem("regionName");
      state.region.regionId = sessionStorage.getItem("regionId");
      state.selects = JSON.parse(sessionStorage.getItem("selects"));
      getDataList();
    }

    onMounted(() => {
      getParams();
    })

    //根据regionId 查询指标
    function getDataList(){
      let statMonth = state.date.showDate.replace("-","");
      let regionId = state.region.regionId;
      let targetId = state.targetId;
      GetNetUtil.requestPost("/serviceManager/getTargetData", "", {statMonth:statMonth,regionId:regionId,targetId:targetId}, getTargetData)
      async function getTargetData(resp) {
        if (resp.resultCode === "200") {
          let list = resp.data;
          console.log(list)
          state.dataList=[];
          list.forEach((item, index) => {
            if(item.targetValue == undefined){
              item.targetValue = '--';
            }
            state.dataList.push(item);
          });
        }else {
          console.log("查询regionId下所有子 指标值",resp);
        }
      }
    }


    //点击查看下一级
    function toDown(item) {
        state.region.regionId = item.regionId;
        state.region.regionName = item.regionName;
        state.selects.push({regionId:item.regionId,regionName:item.regionName});
        getDataList();
    }

    function downClick(event) {
      state.pageX = event.pageX //获取鼠标的X坐标（鼠标与屏幕左侧的距离，单位为px）
      state.pageY = event.pageY + 20 //获取鼠标
      console.log(event)
      state.showTabList = true
    }

    function onClickLeft() {
      goback();
    }

    //返回首页
    function goback(){
      sessionStorage.setItem("regionId",state.region.regionId);
      sessionStorage.setItem("regionName",state.region.regionName);
      sessionStorage.setItem("showDate",state.date.showDate);
      sessionStorage.setItem("selects",JSON.stringify(state.selects));

      router.push({
        name: 'service-manager',
        // params: {//传值进去
        //   regionId: state.region.regionId,//地市选择的值
        //   regionName: state.region.regionName,//地市选择的值
        //   showDate:state.date.showDate,
        //   selects:JSON.stringify(state.selects)
        // }
      })
    }

    //下拉选择tab
    function tabItemClick(item,index) {
      clickActiv({name:index,title:item})
      state.active = index;
    }
    //选择地市
    function toArea() {
      sessionStorage.setItem("regionId",state.region.regionId);
      sessionStorage.setItem("regionName",state.region.regionName);
      sessionStorage.setItem("routeName",'service-more');
      sessionStorage.setItem("showDate",state.date.showDate);
      sessionStorage.setItem("selects",JSON.stringify(state.selects));
      sessionStorage.setItem("title",state.title);
      sessionStorage.setItem("id",state.id);
      router.push({
        name: 'areas'
      })
      // params: {//传值进去
      //   // regionId: state.region.regionId,//地市选择的值
      //   // regionName: state.region.regionName,//地市选择的值
      //   // routeName:'service-more',
      //   // showDate:state.date.showDate,
      //   // selects:JSON.stringify(state.selects),
      //   // title:state.title,
      //   // id:state.id
      // }
    }

    function _addZero(data) {
      if (data < 10) {
        return "0" + data
      } else {
        return data
      }
    }

    function dateClick() {
      state.showPicker = true
    }
    //日期确认框
    function confirm(val) {
      let currentDate = val
      let selectDate = currentDate.getFullYear() + "-" + _addZero(currentDate.getMonth() + 1)
      state.date.showDate = selectDate
      state.date.currentDate = currentDate
      state.showPicker = false
      getDataList();
    }

    function cancel() {
      state.showPicker = false
    }
    //点击tab事件
    function clickActiv( {name, title} ){
      state.targetId = name + 1;
      getDataList();
    }
    return {
      ...toRefs(state),
      onClickLeft,
      toDown,
      toArea,
      dateClick,
      confirm,
      cancel,
      downClick,
      tabItemClick,
      clickActiv
    }
  },
}
</script>

<style lang="scss" scoped>
.homes {
  width: 100%;
  height: 100%;
  background: #ffffff;
  overflow: hidden;

  .nav-right {
    font-size: 8px;
    color: #ffffff;
  }

  .content-box {
    height: calc(100% - 44px);
    width: 100%;
  }

  .tab-box {
    height: calc(100% - 94px);
    width: 100%;
  }

  .area {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 94px;
    width: 100%;

    .change {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #f6f6f6;
      padding: 5px;
      height: 44px;
      //width: 104px;
      border-radius: 10px;
      background-color: #f6f6f6;

      .change-title {
        font-size: 14px;
        color: gray;
        margin-right: 5px;
      }
    }
  }


  .tab-back {
    // position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    height: 44px;
    z-index: 9999;

    .dropdown {
      position: absolute;
      left: 0px;
      top: 140px;
      width: 100%;
      height: 40px;
    }

    .arrow-down {
      margin-left: 10px;
    }

    .tabs {
      width: 90%;
    }
  }

  .contents {
    position: relative;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    width: 100%;
    height: calc(100% - 44px);
    overflow: hidden;

    .date {
      margin: 10px;
      display: flex;
      align-items: center;

      .date-title {
        font-size: 14px;
        color: #929292;
      }

      .date-date {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        height: 30px;
        margin-left: 10px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
        color: #4a87ed;
        border: 1px solid #4a87ed;
        border-radius: 15px;

        .arrow-down {
          margin-left: 5px;
        }
      }
    }

    .list {
      overflow-y: auto;
      width: 100%;
      height: 100%;
      .list-item {
        display: flex;
        justify-content: space-between;
        height: 54px;
        align-items: center;
        font-size: 14px;
        border-bottom: 1px solid #f8f8f8;

        .value-area {
          width: 50%;
          margin-left: 10px;
          font-weight: bold;
        }

        .value-title {
          width:40%;
          display: flex;
          color: #929292;

          .value {
            color: green;
            font-size: 16px;
            font-weight: bold;
          }

        }

        .next {
          margin-right: 10px;
        }
      }
    }
  }

  .overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    overflow: hidden;

    .tablist {
      width: 100%;
      height: 500px;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      background-color: #ffffff;

      .tabs-item {
        // padding-left: 20px;
        // height: 40px;
        width: 100%;
        padding: 20px;
        display: flex;
        align-items: center;
        font-size: 14px;
        border-bottom: 1px solid #dedede;
      }
    }
  }


}

</style>